@charset "utf-8";
$font-size: 40;
@function r($px) {
  @return $px/(2*$font-size) * 1rem;
}

header {
  width: 100%;
  height: r(76);
  position: absolute;
  top: 0;
  border-bottom: 1px solid #a8a9a8;
  a {
    .iconfont {
      float: left;
      margin-left: r(28);
      margin-top: r(16);
      font-size: r(36);
      color: black;
    }
  }
  h4 {
    font-size: r(30);
    margin: r(24) auto 0;
    text-align: center;
  }

  p {
    float: right;
    font-size: r(35);
    margin-top: r(18);
    margin-right: r(35);
    a{
      span{
        color: black;
      }
    }
  }


}

section {
  position: absolute;
  top: r(77);
  bottom: 0;
  overflow-y: scroll;
  width: 100%;
  article {
    width: r(585);
    margin: 0 auto;
    textarea {
      width: 100%;
      height: r(230);
      background: rgb(242, 242, 242);
      font-size: r(24);
      margin-top: r(30);
      padding-top: r(18);
      padding-left: r(18);
      box-sizing: border-box;
      border: none;

    }
    .add {
      width: 100%;
      height: r(200);
      background: rgb(242, 242, 242);
      margin-top: r(14);
      margin-bottom: r(14);
      overflow: hidden;
      div {
        width: r(165);
        height: r(165);
        overflow: hidden;
        margin: r(16) 0 0 r(16);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .place{
        width: r(250);
        height: r(36);
        background: rgb(217, 217, 217);
        text-align: center;
        margin-top: r(145);
        margin-left: r(24);
        .address{
          font-size: r(20);
          line-height: r(36);
          color: rgba(0,0,0,0.5);
        }
      }


    }
    .item {
      width: 100%;
      height: r(80);
      border-top: 1px solid rgb(217, 217, 217);
      border-bottom: 1px solid rgb(217, 217, 217);
      vertical-align: middle;
      line-height: r(80);
      span {
        font-size: r(24);
      }
      a{
        i{
          float: right;
          font-size: r(30);
          color: black;
          margin-right: r(20);
        }
      }

    }
    .ul_bottom {
      li {
        width:100%;
        height: r(80);
        line-height: r(80);
        font-size: r(24);
        border-bottom: 1px solid rgb(229, 229, 229);
        .on-off {
          width: r(90);
          height: r(48);
          background: #000000;
          border-radius: r(30);
          margin-top: r(20);
          margin-right: r(29);
          border:r(2) solid #B2B2B2;
          position: relative;
          transition: all 200ms;
          button {
            width: r(50);
            height: r(50);
            border-radius: r(56);
            background: #FFFFFF;
            position: absolute;
            left: r(0);
            top: r(-3);
            border: r(1) solid #BBBBBB;
            transition: all 180ms;
          }
        }
        &.active{
          .on-off{
            background: #FFFFFF;

          }
          button{
            left:r(40);
          }
        }
      }
    }
    p.share {
      font-size: r(24);
      margin-top: r(28);
    }
    .share_to {
      margin-top: r(22);
      margin-bottom: r(284);
      width: 100%;
      .wrap{
        div {
          width: r(62);
          height: r(62);
          overflow: hidden;
          img {
            vertical-align: top;
            width: 100%;
            height: 100%;
          }
        }
      }
      .wrap:nth-of-type(1){
        margin-left: r(78);
        float: left;
      }
      .wrap:nth-of-type(3){
        margin: 0 auto;
        width: r(62);
      }
      .wrap:nth-of-type(2){
        float: right;
        margin-right: r(72);
      }
    }
  }
}

.more_wrap{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.65);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  .list{
    width: 100%;
    position: absolute;
    bottom: 0;
    transform: translateY(200%);
    transition: all 500ms;
    li{
      height: r(79);
      background: white;
      border-bottom: 1px solid #dcdcdc;
      font-size: r(26);
      color: rgba(0,0,0,.9);
      text-align: center;
      line-height: r(79);
      &:last-child{
        color: rgba(0,0,0,.5);
      }
      &:hover{
        background: #ccc;
        color: white;
      }
    }
  }
}